<template>
  <div class="revenue-analytics">
    <a-row :gutter="[16, 16]">
      <!-- 收入概览 -->
      <a-col :span="6" v-for="stat in revenueStats" :key="stat.title">
        <a-card>
          <a-statistic
            :title="stat.title"
            :value="stat.value"
            :precision="2"
            :prefix="stat.prefix"
            :valueStyle="{ color: stat.color || '#3f8600' }"
          />
        </a-card>
      </a-col>

      <!-- 收入趋势 -->
      <a-col :span="24">
        <a-card title="收入趋势">
          <a-radio-group v-model:value="timeRange" style="margin-bottom: 16px">
            <a-radio-button value="7">近7天</a-radio-button>
            <a-radio-button value="30">近30天</a-radio-button>
            <a-radio-button value="90">近90天</a-radio-button>
            <a-radio-button value="365">近一年</a-radio-button>
          </a-radio-group>
          <div ref="revenueTrendChart" style="height: 300px"></div>
        </a-card>
      </a-col>

      <!-- 收入来源分布 -->
      <a-col :span="12">
        <a-card title="收入来源分布">
          <div ref="revenueSourceChart" style="height: 300px"></div>
        </a-card>
      </a-col>

      <!-- 付费用户分析 -->
      <a-col :span="12">
        <a-card title="付费用户分析">
          <div ref="payingUserChart" style="height: 300px"></div>
        </a-card>
      </a-col>

      <!-- 作品收入排行 -->
      <a-col :span="24">
        <a-card title="作品收入排行">
          <a-table :columns="columns" :data-source="topNovels" :pagination="{ pageSize: 10 }">
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'revenue'">
                ¥{{ record.revenue.toLocaleString() }}
              </template>
              <template v-if="column.key === 'trend'">
                <span :style="{ color: record.trend > 0 ? '#f5222d' : '#52c41a' }">
                  {{ record.trend > 0 ? '+' : '' }}{{ record.trend }}%
                </span>
              </template>
            </template>
          </a-table>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { getRevenueStats } from '@/api/analytics'

export default defineComponent({
  name: 'RevenueAnalytics',
  setup() {
    const timeRange = ref('7')
    const revenueStats = ref([
      { title: '今日收入', value: 12580.50, prefix: '¥', color: '#3f8600' },
      { title: '本月收入', value: 358900.80, prefix: '¥', color: '#1890ff' },
      { title: '年度收入', value: 3580000.00, prefix: '¥', color: '#722ed1' },
      { title: '总收入', value: 12580000.00, prefix: '¥', color: '#faad14' }
    ])

    const columns = [
      { title: '排名', dataIndex: 'rank', key: 'rank', width: 80 },
      { title: '作品名称', dataIndex: 'title', key: 'title' },
      { title: '作者', dataIndex: 'author', key: 'author', width: 120 },
      { title: '收入', dataIndex: 'revenue', key: 'revenue', width: 120 },
      { title: '趋势', dataIndex: 'trend', key: 'trend', width: 100 }
    ]

    const topNovels = ref([
      {
        rank: 1,
        title: '玄幻小说一号',
        author: '作者A',
        revenue: 125800,
        trend: 12
      }
      // ... 更多数据
    ])

    const revenueTrendChart = ref(null)
    const revenueSourceChart = ref(null)
    const payingUserChart = ref(null)

    onMounted(() => {
      initRevenueTrendChart()
      initRevenueSourceChart()
      initPayingUserChart()
    })

    const initRevenueTrendChart = () => {
      const chart = echarts.init(revenueTrendChart.value)
      chart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '¥{value}'
          }
        },
        series: [{
          data: [8200, 9320, 9010, 9340, 12900, 13300, 13200],
          type: 'line',
          smooth: true,
          areaStyle: {}
        }]
      })
    }

    // 其他图表初始化方法...

    return {
      timeRange,
      revenueStats,
      columns,
      topNovels,
      revenueTrendChart,
      revenueSourceChart,
      payingUserChart
    }
  }
})
</script>

<style scoped>
.revenue-analytics {
  padding: 24px;
}
</style> 